import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import Filters from 'components/common/filters'
import CustomTable from 'components/common/table'
import { Form, Button } from 'antd'
import { widgetType } from 'constants'
import PropTypes from 'prop-types'
import Style from './manage.css'

class RecycleForm extends Component {
  static propTypes = {
    form: PropTypes.object,
    getInviteList: PropTypes.func,
    inviteData: PropTypes.object,
    router: PropTypes.object
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20,
      params: {},
      selectedRowKeys: []
    }
    this.search = this.search.bind(this)
    this.reset = this.reset.bind(this)
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getFilterCols (category, author) {
    return [
      {
        label: '输入搜索',
        id: 'searchField',
        widget: widgetType.input,
        placeholder: '请输入用户Id/用户手机号',
        span: 6
      }, {
        label: '用户名称',
        id: 'userName',
        widget: widgetType.input,
        placeholder: '请输入用户名称',
        span: 6
      }, {
        label: '用户类型',
        id: 'memberLevel',
        widget: widgetType.select,
        placeholder: '请选择用户类型',
        span: 6,
        options: [{
          text: '普通用户',
          value: 'NORMAL_LEVEL'
        }, {
          text: '付费用户',
          value: 'PAY_LEVEL'
        }]
      },
      {
        label: false,
        key: 'custom',
        widget: 'custom',
        render: () => {
          return (
            <>
              <Button type='primary' style={{ marginRight: 16 }} onClick={() => this.search('custom')}>查询</Button>
              <Button onClick={() => this.reset('custom')}>重置</Button>
            </>
          )
        },
        span: 6
      }
    ]
  }

  getTableCols () {
    return [
      {
        title: '用户Id',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      },
      {
        title: '用户手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 100

      },
      {
        title: '用户名称',
        dataIndex: 'userName',
        key: 'userName',
        width: 100
      },
      {
        title: '会员等级',
        dataIndex: 'menberLevelName',
        key: 'menberLevelName',
        width: 100
      },
      {
        title: '邀请好友',
        dataIndex: 'invitedCount',
        key: 'invitedCount',
        width: 100,
        sorter: (a, b) => a.price - b.price
      },
      {
        title: '成功邀请好友',
        dataIndex: 'tradCount',
        key: 'tradCount',
        width: 100,
        sorter: (a, b) => a.price - b.price
      },
      {
        title: '累计奖励积分',
        dataIndex: 'invitedIntegration',
        key: 'invitedIntegration',
        width: 100,
        sorter: (a, b) => a.price - b.price
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        render: (text, record) => {
          return <>
            <a className={Style['a-btn']} onClick={() => this.props.router.push(`/users/invite/details/${record.userId}`)}>查看明细</a>
          </>
        },
        width: 100
      }
    ]
  }

  reset (values = {}) {
    if (values === 'custom') {
      const { form } = this.props
      form.resetFields()
    }
    this.setState({
      pageNo: 1,
      pageSize: 20
    })
    this.props.getInviteList({
      pageNo: 1,
      pageSize: 20
    })
  }
  search (values = {}) {
    if (values === 'custom') {
      const { form } = this.props
      form.validateFields((err, items) => {
        if (!err) {
          values = items
        }
      })
    }
    const { pageSize, pageNo } = this.state
    values.pageNo = pageNo
    values.pageSize = pageSize
    this.props.getInviteList(values)
  }

  onPageChange (pageNo, pageSize) {
    const { params } = this.state
    params.pageNo = pageNo
    params.pageSize = pageSize
    this.setState({
      pageNo
    })
    this.props.getInviteList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const { params } = this.state
    params.pageNo = current
    params.pageSize = pageSize
    this.props.getInviteList(params)
  }

  componentDidMount () {
    const { pageSize, pageNo } = this.state
    this.props.getInviteList({
      pageSize,
      pageNo
    })
  }

  componentWillReceiveProps (nextProps) {

  }

  render () {
    const { pageNo, pageSize } = this.state
    const { form, inviteData } = this.props
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: inviteData && inviteData.total,
      onChange: this.onPageChange,
      pageSize,
      onShowSizeChange: this.onShowSizeChange
    }

    return (
      <>
        <ContentBox>
          <div className={Style['scenes-RecycleForm']}>
            <Filters
              cols={this.getFilterCols()}
              form={form}
              search={this.search}
              reset={this.reset}
              actions={false}
            />
            <CustomTable
              loading={!inviteData} columns={this.getTableCols()}
              dataSource={(inviteData && inviteData.list) || []}
              pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  inviteData: state.users.inviteData,
  authorOptionsList: state.users.authorOptionsList
})
const mapDispatch = dispatch => ({
  getInviteList: dispatch.users.getInviteList
})

const Recycle = Form.create()(RecycleForm)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Recycle)
)
